<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto 150px;
            border-collapse: collapse;
            text-align: center;
        }

        tr,
        th,
        td {
            border: 1px solid #999;
            padding: 5px;
        }

        tr,
        th {
            height: 40px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>爱好</td>
                <td>操作</td>

            </tr>
        </thead>
        <tbody>
        </tbody>

    </table>


    <script>
        var arr = [{ id: "0", name: "kky1", nianling: "15", xingbie: "男", aihao: "学习" }, { id: "1", name: "kky2", nianling: "16", xingbie: "男", aihao: "学习,健身" }, { id: "2", name: "kky3", nianling: "17", xingbie: "男", aihao: "学习" }, { id: "3", name: "kky4", nianling: "18", xingbie: "男", aihao: "学习，健身" }, { id: "4", name: "kky5", nianling: "20", xingbie: "男", aihao: "学习" }];
        var bbb = document.getElementById("bbb");

        localStorage.arr = JSON.stringify(arr);
        function getLocalCartData() {
            str = localStorage.arr ? JSON.stringify(localStorage.arr) : [];
            return str;
        }
        window.onload = function () {
            render();
        }
        function render() {
            var table = document.querySelector("tbody");
            table.innerHTML = "";
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += `
                <tr>
                        <td>
                            ${i + 1}  
                        </td>
                        <td>
                            ${arr[i].name}
                        </td>
                        <td>
                            ${arr[i].nianling}
                        </td>
                        <td>
                            ${arr[i].xingbie}
                        </td>
                        <td>
                            ${arr[i].aihao}
                        </td>
                        <td>
                            <button type="button" id="bbb" onclick="shangyi(${arr[i].id})">上移</button>
                            <button type="button" onclick="del(${arr[i].id})">删除</button>
                            <button type="button" id="aaa" onclick="xiayi(${arr[i].id})" >下移</button>
                        </td>
                    </tr>
                `
            }
            table.innerHTML = str;
            localStorage.str = JSON.stringify(str);

        }
        function shangyi(id) {
            var bbb = document.getElementById("bbb");
            /*  var arr2 = localStorage.parse(str); */
            // for (var i = 0; i < arr.length; i++) {

            //     if (id == arr[i].id) {
            //          arr.splice(i, 1); 
            //         arr.splice(i - 1, 0, arr.splice(i, 1)[0]);

            //     }


            // }
            if (id == 0) {
                bbb.disabled = true;

            }
            var arr1 = JSON.parse(localStorage.arr);
            arr.splice(id, 1);
            arr.splice(id - 1, 0, arr1[id]);
            arr[id - 1].id = id - 1;
            arr[id].id = id;
            render(arr);
            console.log(arr);

            localStorage.arr = JSON.stringify(arr);


        }
        function xiayi(id) {
            /* for (var i = 0; i < arr.length; i++) {

                if (id == arr[i].id) {
                    arr.splice(i, 1);
                    arr.splice(i + 1, 0, arr.splice(i, 1)[0]);

                }


            } */
            var aaa = document.getElementById("aaa");
            if (id == 4) {
                aaa.disabled = true;
                /* aaa.style.background = #999999; */
            }
            var arr1 = JSON.parse(localStorage.arr);
            arr.splice(id, 1);
            arr.splice(id + 1, 0, arr1[id]);

            arr[id].id = id;
            render(arr);


            localStorage.arr = JSON.stringify(arr);


        }
        function del(id) {
            /* arr = arr.filter(function (item, index) {
                return item.id != id;
            }) */
            var arr1 = JSON.parse(localStorage.arr);
            /*  for (var i = 0; i < arr1.length; i++) {
 
                 if (i == arr[i].id) {
                     arr.splice(i, 1);
 
                 }
                 render(arr);
 
             }*/
            arr.splice(id, 1);
            render(arr);

        }


    </script>

</body>

</html>